<template>
	<view class="store-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<template #top>
				<view class="store-search">
					<xh-agent-search placeholder="请输入商户姓名" v-model="keywords" tipText="只支持对审核失败的小微商户升级为企业店铺" :showSort="false" @searchResult="searchResult"></xh-agent-search>
				</view>
			</template>
			<view class="store-list">
				<view class="store-list-cell" v-for="item in dataList" :key="item.id">
					<view class="store-list-cell-item">
						<text class="xh-lines-1">商户姓名：{{item.merPer}}</text>
						<text class="store-list-cell-item-status" :style="{color:statusInfo(item).color}">{{statusInfo(item).status}}</text>
					</view>
					<view class="store-list-cell-item">
						<text>商户编号：{{item.thirdMerNo}}</text>
					</view>
					<view class="store-list-cell-item">
						<text class="xh-lines-1">商户名称：{{item.merName}}</text>
						<view class="store-list-cell-item-btn" v-if="item.reportStatus != '1' && item.reportStatus != '3'" @tap="showStoreUpgrade(item)">店铺升级</view>
					</view>
					<view class="store-list-cell-item">
						<text>报备日期：{{item.createTime}}</text>
					</view>
					<view class="store-list-cell-item">
						<text>认证结果：{{item.reportResult}}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { onLoad ,onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getStoreUpgradeList } from '@/common/api/api.js'
	import { useChannelStore } from '@/common/stores'
	
	const channelStore = useChannelStore()
	const pagingRef = ref(null)
	const dataList = ref([])
	const keywords = ref('')
	// 店铺升级
	const showStoreUpgrade = (item)=>{
		console.log(item)
		uni.navigateTo({
			url:`/pages/home/merchant-manager/store-upgrade-list/store-upgrade/store-upgrade?id=${item.id}`
		})
	}
	const statusInfo = (item)=>{
		if(item.reportStatus == '1'){
			return {
				status:'报备成功',
				color:'#1ed432'
			}
		}
		else if(item.reportStatus == '2'){
			return {
				status:'报备失败',
				color:'#f82525'
			}
		}
		else if(item.reportStatus == '3'){
			return {
				status:'报备中',
				color:'#333333'
			}
		}
		else {
			return {
				status:'未报备',
				color:'#333333'
			}
		}
	}
	// 搜索结果回调
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		if(uni.$uv.test.empty(keywords.value) && channelStore.channelType == 'KDB'){
			uni.$utils.showToast('请输入商户姓名')
			pagingRef.value.complete()
			return
		}
		let params = {}
		params.merPer = keywords.value
		const res = await getStoreUpgradeList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	onLoad(()=>{
		uni.$on('reloadStoreUpgradeList',()=>{
			pagingRef.value.reload()
		})
	})
	onUnload(()=>{
		uni.$off('reloadStoreUpgradeList')
	})
</script>

<style lang="scss" scoped>
.store-layout{
	.store-search{
		padding: 30rpx 30rpx 0;
	}
	.store-list{
		padding: 0 30rpx 30rpx;
		.store-list-cell{
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			position: relative;
			.store-list-cell-item{
				display: flex;
				align-items: center;
				font-size: 26rpx;
				&:nth-child(n + 2){
					margin-top: 10rpx;
				}
				.store-list-cell-item-status{
					margin-left: auto;
				}
				.store-list-cell-item-btn{
					background-color: $xh-theme-color;
					color: #fff;
					text-align: center;
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					font-size: 24rpx;
					margin-left: auto;
					position: absolute;
					right: 30rpx;
				}
			}
		}
		
	}
	
}
</style>
